{extend name="./template/default/m/pub/base.html" /}
{block name="seo"}
<title>漫画更新周期表-{$site_name}</title>
{/block}
{block name="content"}
{include file="./template/default/m/pub/top2.html" /}
<div id="app">
    <div class="manga-list-bar">
        <a v-for="(item, index) in days" :key="index" class="manga-list-bar-item" :class="{'active' : day==item.day}"
           style="width: 14.28%" @click="switchTab(item.day, item.date)">
            {{item.name}}
        </a>
    </div>
    <div class="manga-list" style="border:none;background-color:#f8f8f8;margin-top: 100px;">
        <ul id="updatedb0" class="manga-list-2">
            <li v-for="(item, index) in books" :key="index">
                <div class="manga-list-2-cover">
                    <a :href="'/m/{$book_ctrl}/'+ item.param" :title="item.book_name">
                        <img class="manga-list-2-cover-img lazy" :src="item.cover_url">
                    </a>
                </div>
                <p class="manga-list-2-title">
                    <a :href="'/m/{$book_ctrl}/'+ item.param" :title="item.book_name">{{item.book_name}}</a>
                </p>
                <p class="manga-list-2-tip">
                    {{item.summary}}
                </p>
            </li>
        </ul>
    </div>
</div>
<div class="toast" style="display:none;"></div>
<script src="https://lib.baomitu.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://lib.baomitu.com/moment.js/2.24.0/locale/zh-cn.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            books: [],
            days: [],
            day: -1,
            date: '1970-01-01',
            page: 0,
            isMore: 1
        },
        methods: {
            getBooks(isRefresh) {
                axios.get("/m/getUpdate", {
                    params: {
                        page: this.page,
                        date: this.date
                    }
                }).then(response => {
                    if (isRefresh == 1) { //为1是重新渲染
                        this.books = response.data.books
                        this.isMore = 1
                    } else {
                        if (response.data.err == 1) {
                            this.isMore = 0 //设置好之后，上拉加载就不再请求接口了
                            ShowDialog('没有更多了')
                        } else {
                            this.books = this.books.concat(response.data.books)
                        }
                    }
                })
            },
            switchTab(day, date) {
                this.day = day
                this.date = date
                this.getBooks(1)
            },
            onScroll() {                    //可滚动容器的高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                //滚动条到底部的条件
                if (scrollTop + windowHeight == scrollHeight) {
                    if (this.isMore == 1) { //如果还有更多数据，再请求接口，否则不再请求，节省服务器资源
                        this.getBooks(0)
                        this.page = this.page + 15
                    }
                }
            }
        },
        mounted() {
            for(let i=0; i<=6; i++) {
                this.days.push({
                    day: i,
                    date:  moment().subtract(i,'days').format('YYYY-MM-DD'),
                    name: moment().subtract(i,'days').format('dddd').replace('星期','周')
                })
            }
            console.log(this.days)
            this.getBooks(1)
        },
        created() {
            window.addEventListener('scroll', this.onScroll);
        }
    })
</script>
{include file="./template/default/m/pub/return_top.html"}
{/block}